<template>
    <div class="overview-item">
        <a-row>
            <a-col :span="6">
                <div class="item">
                    <img class="item-icon" :src="initiate" alt="" />
                    <div class="content">
                        <div class="number" @click="processData('initiate', 'initiate')">
                            <span class="num">{{ overviewData.initiate }}</span>
                            <triangle :num="overviewData.initiateRate"></triangle>
                        </div>
                        <div class="title">发起流程数</div>
                    </div>
                </div>

            </a-col>
            <a-col :span="6">
                <div class="item" style="border-right: 2px solid #f2f3f5;border-left: 2px solid #f2f3f5;">
                    <img class="item-icon" :src="complete" alt="" />
                    <div class="content">
                        <div class="number" @click="processData('complete', 'complete')">
                            <span class="num">{{ overviewData.complete }}</span>
                            <triangle :num="overviewData.completeRate"></triangle>
                        </div>
                        <div class="title">结束流程数</div>
                        <div class="sub-title">
                            <span>平均{{ formatTime(overviewData.completeTime) }}</span>
                            <triangle style="transform: translateY(-6px)" :num="overviewData.completeTimeRate"></triangle>
                        </div>

                    </div>
                </div>

            </a-col>
            <a-col :span="6">
                <div class="item" style="border-right: 2px solid #f2f3f5;">
                    <img class="item-icon" :src="progressing" alt="" />
                    <div class="content">
                        <div class="number">
                            <span class="num">{{ overviewData.progressing }}</span>
                            <!-- <triangle :num="overviewData.completeRate"></triangle> -->
                        </div>
                        <div class="title">未结束流程数</div>
                        <div class="sub-title">
                            <span>超期占比 </span>
                            <span class="num" style="margin-left: 5px;">{{ overviewData.progressingRate }}%</span>
                            <!-- <triangle style="transform: translateY(-6px)" :num="overviewData.progressing"></triangle> -->
                        </div>
                    </div>
                </div>

            </a-col>
            <a-col :span="6">
                <div class="item">
                    <img class="item-icon" :src="overdue" alt="" />
                    <div class="content">
                        <div class="number" @click="processData('overdue', 'overdue')">
                            <span class="num">{{ overviewData.overdue }}</span>
                        </div>
                        <div class="title">超期流程数</div>
                    </div>
                </div>

            </a-col>
        </a-row>
    </div>
</template>
<script>
import triangle from './triangle.vue'
import { BoardMixin } from './boardMixin'
import { getAction } from '@/api/manage';
import moment from 'dayjs'
export default {
    components: {
        triangle
    },
    mixins: [BoardMixin],
    props: {
        // overviewData: {
        //     type: Object,
        //     default: () => { }
        // },
        time: {
            type: Array,
            default: () => []
        }
    },
    watch: {
        time: {
            handler() {
                this.init()
            },
        }
    },
    data() {
        return {
            overviewData: {},
            initiate: require('@/assets/faqi.png'),
            complete: require('@/assets/jieshu.png'),
            progressing: require('@/assets/jinxingzhong.png'),
            overdue: require('@/assets/chaoqibeifen.png'),

        }
    },
    mounted() {
        this.init()
    },
    methods: {
        init() {
            let startDate = `${moment(this.time[0]).format('YYYY-MM')}-01 00:00:00`
            let endDate = `${moment(this.time[1]).endOf('month').format('YYYY-MM-DD')} 23:59:59`
            getAction('/api/erpmng/sys/bpm/report/board/overview', { startDate, endDate }).then(res => {
                this.overviewData = res.result || {}
            })
        },
        processData(val1, val2) {
            let obj = {
                sortType: val1,
                queryType: val2
            }
            this.$emit('processData', obj)
        }
    },

}
</script>

<style lang="less" scoped>
.overview-item {
    background-color: #fff;

    .item {
        display: flex;
        justify-content: flex-start;
        // border-left: 2px solid #f2f3f5;
        padding: 10px 15px;


        .item-icon {
            height: 60px;
            width: 60px;
        }

        .content {
            display: flex;
            flex-direction: column;
            flex-wrap: nowrap;
            margin-left: 10px;

            // div {
            //     padding: 2px 0;
            // }
            .number {
                display: flex;
                align-items: center;

                .num {
                    font-size: 30px;
                    font-weight: 500;
                }
            }

            .sub-title {
                display: flex;
                align-items: center;
            }

            .number:hover {
                cursor: pointer;
            }
        }

    }


}
</style>